<template>
    <div class="app-container ui-page-login">
        <header class="mui-bar mui-bar-transparent">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        </header>
        <div class="login-content">
            <form id="login-form">
                <div class="ipttxt-row">
                    <input v-model="account" type="text" class="mui-input" placeholder="请输入账号"/>
                </div>
                <div class="ipttxt-row">
                    <input v-model='password' type="password" class="mui-input" placeholder="请输入密码"/>
                </div>
                <div class="ipttxt-row">
                    <input v-model="email" type="email" class="mui-input" placeholder="请输入邮箱"/>
                </div>
                <div class="ipttxt-row">
                    <input v-model="name" type="text" class="mui-input" placeholder="请输入姓名"/>
                </div>
                <div class="link-area">
                    <router-link to="/login">已有账号，点击登录</router-link>
                </div>
            </form>
            <div class="">
                <button type="button" v-on:click="postRegister" class="mui-btn mui-btn-block mui-btn-login">注 册</button>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'

    export default {
        data(){
            return{
                account:'',
                password:'',
                email:'',
                name:''
            }
        },
        methods:{
            postRegister(){
                this.$http.post('reg', {
                    account:this.account,
                    password:this.password,
                    email:this.email,
                    name:this.name
                } ).then(result => {
                    // console.log(result)
                        var err_code = result.body.err_code;
                        if(err_code === 0){
                            sessionStorage.setItem('token',result.body.userid);
                            Toast({
                                message: '注册成功',
                                iconClass: 'fa fa-check fa-4x'
                            });
                            setTimeout(function () {
                                window.location.href = 'http://127.0.0.1:5000/#/home';
                                // window.location.href = 'http://charlotte912.gitee.io/vue_0004/#/home';
                            }, 1000);
                            console.log('注册成功')
                        }else if(err_code === 1){
                            console.log('邮箱或者昵称已存在');
                            Toast({
                                message: '邮箱或者昵称已存在',
                                iconClass: 'fa fa-times fa-4x'
                            });
                        }else if(err_code === 500){
                            console.log('服务器忙 爬!')
                        }
                })
            }
        }
    }
</script>

<style scoped>
    .mui-input-group label {
        width: 22%;
    }
    .mui-input-row label~input,
    .mui-input-row label~select,
    .mui-input-row label~textarea {
        width: 78%;
    }
    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
        top: 6px;
    }
    .mui-btn {
        padding: 10px;
    }
    .link-area{
        text-align:center;
    }

    .ui-page-login,  body {
        width: 100%;
        height: 1000px;
        margin: 0;
        padding: 0;
    }
    .ui-page-login{
        background-image: url("http://127.0.0.1:3000/public/img/login-bg.jpg");
        background-size: 100% 100%;
    }

    .login-content{
        position: absolute;
        top: 25%;
        width: 90%;
        left: 50%;
        margin-left: -45%;
        border-radius: 10px;
        padding: 0 25px;
        background-color: rgba(255,255,255,0.5);
    }

    .ipttxt-row{
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
    }
    .ipttxt-row label{
        width: 20%;
    }
    .ipttxt-row .mui-input{
        width: 100%;
        border: 1px solid #fb4746;
        border-radius: 30px;
        margin-bottom: 0;
        background-color: transparent;
    }
    .ipttxt-row .mui-input::placeholder{ font-size: 14px;}
    .link-area{
        margin-top: 12px;
        margin-bottom: 15px;
        text-align: right;
    }
    .link-area a{
        color: #fb4746;
        font-size: 14px;
    }
    .mui-btn-login{
        padding: 10px 0;
        background-color: #fb4746;
        border: 1px solid #fb4746;
        border-radius: 30px;
        color: #fff;
    }
</style>
